<template>
	<view class="about-us">
		<view class="us-header">
			<view class="us-info-box">
				<view class="us-avatar">
					<!-- <image src="@/static/icons/follow-avatar.png"></image> -->
					<image src="https://sxg123.cn/xyb.png"></image>
				</view>
				<view class="us-userinfo">
					<text>小鱼包</text>
					<text>
						会员号:000001
					</text>
				</view>
				<uni-icons type="gear" @click="toSetting"></uni-icons>
				
			</view>
			<view class="fixed-box">
				<view class="in-box">
					<view>
						<text>0。00</text>
						<text>我的积分</text>
					</view>
					<view @click="toBalancePage">
						<text>0.00</text>
						<text>我的余额</text>
					</view>
					<view>
						<text>敬请期待...</text>
						<text>红包卡券</text>
					</view>
				</view>
			</view>
		</view>
		<view class="us-orders" >
			<uni-card :isFull="false" :is-shadow="false">
				<template v-slot:title>
					<view class="orders-title" @click="toAddShippingAddress">
						<text>我的订单</text>
						<view>
							<text>全部</text>
							<uni-icons type="right" size="30"></uni-icons>
						</view>
					</view>
					<view class="orders-type">
						<view class="order-item" @click="toAddShippingAddress">
							<image src="@/static/icons/follow-wait-pay.png"></image>
							<text>待付款</text>
						</view>
						<view class="order-item" @click="toAddShippingAddress">
							<image src="@/static/icons/follow-payed.png"></image>
							<text>已付款</text>
						</view>
						<view class="order-item" @click="toAddShippingAddress">
							<image src="@/static/icons/follow-paying.png"></image>
							<text>进行中</text>
						</view>
						<view class="order-item" @click="toAddShippingAddress">
							<image src="@/static/icons/follow-finish.png"></image>
							<text>已完成</text>
						</view>
						<view class="order-item" @click="toAddShippingAddress">
							<image src="@/static/icons/follow-exit-store.png"></image>
							<text>售后</text>
						</view>
					</view>
				</template>
			</uni-card>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from "vue"
	
	/**
	 * useTo: 适配宽屏 
	 */
	let usOrderStyle = ref<number>(60) 
	onMounted(async () => {
		let { windowWidth } = await uni.getSystemInfo()
		  if (windowWidth === 768) {
			usOrderStyle.value = 60
		  } else if (windowWidth === 834) {
			usOrderStyle.value = 70
		  } else if (windowWidth === 1024) {
			usOrderStyle.value = 80
		  }
	})
	
	/**
	 * useTo: 跳转余额页面
     */
	const toBalancePage = () => {
		uni.navigateTo({
			url: "/pages/followHeartMe/components/balance"
		})
	}
	/**
	 * useTo: 跳转
	 */
	const toAddShippingAddress = () => {
		uni.navigateTo({
			url: '/pages/followHeartMe/components/orderStatuss'
		})
	}
	/**
	 * useTo: 跳转到添加收货地址路由 
	 */
	const toSetting = () => {
		uni.navigateTo({
			url: '/pages/followHeartMe/components/setting'
		})
	}
</script>

<style scoped lang="scss">
	.about-us {
		box-sizing: border-box;
		.us-header {
			:deep(.uni-icons) {
				font-size: 60rpx!important;
			}
			position: relative;
			display: flex;
			align-items: center;
			height: 400rpx;
			background-image: linear-gradient(to right, rgba(204, 204, 204, .6), rgba(174, 174, 174, .8), rgba(204, 204, 204, .6));
			.us-info-box {
				position: relative;
				@include flex;
				align-items: center;
				padding: 0 20px;
				width: 100%;
				box-sizing: inherit;
				.us-avatar {
					width: 15vw;
					height: 15vw;
					border-radius: 50%;
					image {
						width: inherit;
						height: inherit;
					}
				}
				.us-userinfo {
					@include columnFlex;
					justify-content: space-between;
					margin-left: -60px;
					text {
						color: #fff;
						margin-bottom: 20rpx;
						font-size: 40rpx;
					}
				}
			}
			.fixed-box {
				width: 100%;
				position: absolute;
				bottom: -40px;
				padding: 0 15px;
				box-sizing: border-box;
				.in-box {
					@include flex;
					border-radius: 15px;
					background-color: #fff;
					box-shadow: 0 0 6px 0 rgba(207, 207, 207, .5);
					view {
						@include columnFlex;
						align-items: center;
						flex: 1;
						padding: 15px 0;
						box-sizing: border-box;
						&:nth-child(2) {
							position: relative;
							&:before,
							&:after {
								content: "";
								width: 2px;
								height: 35px;
								background-color: #ccc;
							}
							&:before {
								position: absolute;
								left: 0;
							}
							&:after {
								position: absolute;
								right: 0;
							}
						}
						text {
							color: $uni-info;
							&:first-child {
								color: $uni-primary;
								font-size: 40rpx;
								font-weight: 700;
							}
						}
					}
				}
			}
		}
		// 我的订单
		.us-orders {
			margin-top: 60px;
			:deep(.uni-card) {
				border-radius: 20rpx;
			}
			.orders-title {
				@include flex;
				align-items: center;
				padding: 10px;
				border-bottom: 1px solid #cccfd3;
				view {
					@include flex;
					align-items: center;
					text {
						vertical-align: middle;
					}
					color: $uni-base-color;
					:deep(.uni-icons) {
						color: $uni-base-color!important;
					}
				}
			}
			.orders-type {
				@include flex;
				margin-top: 40rpx;
				padding: 10rpx 20rpx;
				.order-item {
					@include columnFlex;
					align-items: center;
					padding: 5rpx;
					image {
						margin-bottom: 10rpx;
						width: 60rpx;
						height: 60rpx;
					}
					text {
						color: $uni-base-color;
					}
				}
			}
			
		}
	}
</style>